<template>
  <div class="role">
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="primary" @click="toAdd" size="medium">添加</el-button>
    </div>
    <el-table :data="Role" style="width: 100%">
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="info" @click="drawer = true" size="mini">详情</el-button>
          <el-button type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
          <el-button type="danger" @click="del(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="角色 ID" prop="id"></el-table-column>
      <el-table-column label="角色名称" prop="name"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
      drawer: false,
      Role: [],

      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.findAllRole()
  },
  methods: {
    handleNodeClick(rr) {},
    findAllRole() {
      let url = 'http://47.93.12.6:8889/roleprivilege/findAllRole'
      get(url).then(response => {
        this.Role = response.data
      })
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.btns {
  margin-bottom: 0.5em;
}
.drawer {
  font-size: 25px;
  padding: 20px;
}
</style>
